<template>
  <div id="main">
    <div class="content">
      <button id="recordBtn" @click="ctrlRecord" v-ripple>{{ btn_text }}</button>
      <div class="line">
        <span>开启声音</span>
        <van-switch v-model="is_have_audio" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: "FunView",
  mounted(){
    window.getAudioFlag=this.getAudioFlag
  },
  data(){
    return {
      isRecord:false,
      btn_text:"开始录屏",
      is_have_audio:true
    }
  },
  methods:{
    toScreenRecord(){
      window.android.toRecord()
    },
    toPictureRecord(){
      window.android.toPictureRecord()
    },
    ctrlRecord(){
      if(this.isRecord==false){
        this.startRecord()
      }else{
        this.stopRecord()
      }
    },
    startRecord(){
      this.isRecord=true
      this.btn_text="停止录屏"
      window.android.startRecord()
    },
    stopRecord(){
      window.android.stopRecord()
      this.isRecord=false
      this.btn_text="开始录屏"
    },
    getAudioFlag(){
      return this.is_have_audio
    }
  }
}
</script>

<style scoped>
#main{
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
  display: flex;
  flex-direction: column;

  
  align-items: center;
  justify-content: center;
}
.content button{
  flex: 1;
  width: 50vw;

  background: #29a1f7;
  margin: 0.5rem;
  padding: 1rem;
  border-radius: 20px;
  border: none;
  /*去除选中边框*/
  outline: none;
  color: white;
}
.line{
  height: 2rem;
  width: 90vw;
  margin-top: 3rem;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
}

</style>